<template>
	<view class="home">
		<!-- #ifdef APP-PLUS||MP-WEIXIN -->
			<view style="margin-top: 30px;"></view>
		<!-- #endif -->
		
		<!-- 搜索栏区域 -->
		<search-item @showDrawer="showDrawer('showLeft')"></search-item>
		<!-- 侧拉栏区域 -->
		<view class="drawer">
			<!-- 侧拉栏内容 -->
			<uni-drawer mask ref="showLeft" mode="left" :width="250" @change="change($event,'showLeft')">
				<drawer-content-item @closeDrawer="closeDrawer('showLeft')" @scan='scan()'></drawer-content-item>
			</uni-drawer>
		</view>
		<!-- 轮播图区域 -->
		<view class="banner">
			<swiper indicator-dots autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="item in swipers" :key="item.id" @click="goBn1()" >
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in nav" :key="index" @click="goNavs(item)">
				<uni-icons class="icon" :type="item.type" size="70rpx"></uni-icons>
				<view>{{item.title}}</view>
			</view>
		</view>
		<!-- 推荐区域 -->
		<view class="recom">
			<view class="u_list">
				<view :class="recomflag?'b':''" @click="chooseRecom">影院热映</view>
				<!-- #ifdef H5||APP-NVUE -->
				<view class="line"></view>
				<!-- #endif -->
				<view :class="!recomflag?'b':''" @click="chooseHot">热门推荐</view>
			</view>
			<scroll-list-item v-show="recomflag" class="recom-item" :array="recoms"></scroll-list-item>
			<scroll-list-item v-show="!recomflag" class="recom-item" :array="hot"></scroll-list-item>
		</view>
		<!-- 找电影区域 -->
		<view class="find">
			<view class="b">找电影</view>
			<view class="find-item" v-for="(item,index) in find" :key="item.id">
				<view class="f-pics">
					<image class="cover" :src="item.cover_url" mode="aspectFill" @click="goDetail(item.id)"></image>
					<swiper class="f-swiper" indicator-dots @click="goDetail(item.id)">
						<swiper-item v-for="(item,index) in item.pics" :key="index">
							<view class="swiper-item">
								<image :src="item.img_url" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="text">
					<view class="b">{{ item.title }}</view>
					<view class="t-score">
						<uni-rate :readonly="true" :value="item.grade*0.5" size="13px"/>
						<view class="t-score-n" style="color: #ff9500;">{{ item.grade }}</view>
					</view>
					<view class="s">{{ item.tag }}</view>
					<view>热评：{{ item.review[0].content }}</view>
				</view>
			</view>
		</view>
		<!-- 底部区域 -->
		<view class="bottom" v-show="findflag">前面的区域以后再来探索吧</view>
	</view>
</template>

<script>
	import searchItem from '../../components/search-item/search-item.vue';
	import scrollListItem from '../../components/scroll-list-item/scroll-list-item.vue';
	import uniSection from '../../components/uni-section/uni-section.vue';
	import drawerContentItem from '../../components/drawer-content-item/drawer-content-item.vue';
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				showLeft: false,
				flag: [],
				recomflag: true,
				findflag: false,
				pageIndex: 0,
				title: '首页',
				swipers: [
					{
						id: 1,
						imgUrl:"../../static/images/banner1.webp",
						grade: 4.9	
					},
					{
						id: 2,
						imgUrl:"../../static/images/banner2.webp",
						grade: 4.9	
					},
					{
						id: 3,
						imgUrl:"../../static/images/banner3.webp",
						grade: 4.9	
					},
				],
				nav: [
					{
						id: 0,
						type: 'search',
						title: '找电影',
						path: ''
					},
					{
						id: 1,
						type: 'medal',
						title: '排行榜',
						path: '../mov-list/mov-list'
					},
					{
						id: 2,
						type: 'calendar',
						title: '即将上映',
						path: '../onnext/onnext'
					},
					{
						id: 3,
						type: 'list',
						title: '片单',
						path: '../mov-list/mov-list'
					}
				],
				recoms: [],
				hot: [],
				find: []
			}
		},
		computed: mapState(['isLogin','userInfo']),
		components: {
			'search-item': searchItem,
			'scroll-list-item': scrollListItem,
			'drawer-content-item': drawerContentItem
		},
		onLoad() {
			this.getRecoms(1)
			this.getRecoms(2)
			this.getFind()
			uni.$on('scrollItemClick',(id) => {
				this.goDetail(id.id)
			})
		},
		onReachBottom() {
			this.pageIndex++
			this.getFind()
		},
		onPullDownRefresh() {
			this.findflag = false
			this.pageIndex = 0
			this.find = []
			this.recoms = []
			setTimeout(()=>{
				this.getRecoms(1)
				this.getRecoms(2)
				this.getFind()
				setTimeout(() =>{
					uni.stopPullDownRefresh()
				},500)
			},300)
		},
		methods: {
			getRecoms(type){//获取热门推荐数据
				uni.request({
					url: 'http://www.yingke.com/Index/movieType?type='+type+'&page='+this.pageIndex,
					method: 'POST',
					success: (res) => {
						if(type==1)
							this.recoms = res.data.data
						else if(type==2)
							this.hot = res.data.data
					}
				})
			},
			getFind() {//获取找电影数据
				uni.request({
					url: 'http://www.yingke.com/Index/movieType?type=3&page='+this.pageIndex,
					method: 'POST',
					success: (res) => {
							if(res.data.data.length==0)
								this.findflag = true
							else
								this.find = [...this.find,...res.data.data]
					}
				})
			},
			goDetail(id){//跳转至影片详情页
				uni.navigateTo({
					url: '../mov-detail/mov-detail?data='+id
				})
			},
			goNavs(item) {
				switch(item.id){
					case 0:
						uni.createSelectorQuery().select('.find').boundingClientRect(data=>{//目标位置的节点，类class或者id
							uni.pageScrollTo({//页面滚动至目标class
								duration: 100,//过渡时间
								scrollTop: data.top//到达目标class的top值
							})
						}).exec();
						break
					case 1:
						uni.navigateTo({//跳转至排行榜页面
							url: '../rank/rank'
						})
						break
					case 2:
						uni.navigateTo({//跳转至即将上映页面
							url: '../onnext/onnext'
						})
						break
					case 3:
						if(!this.isLogin)
							uni.navigateTo({
								url: '../mov-list/mov-list?uid='+this.userInfo.id
							})
						else{
							uni.showToast({
								title: '当前未登录',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '../login/login'
								})
							},1000)
						}
					default:
						break
				}
			},
			goBn1() {
				let userInfo = {avatar_url:'https://yingke-pics.oss-cn-shenzhen.aliyuncs.com/user/01.jpg',name:'Lisa'}
				uni.navigateTo({
					url: '../com-detail/com-detail?id=18&userInfo='+ JSON.stringify(userInfo)
				})
			},
			scan() {
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open();
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close();
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				// console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},chooseRecom() {
				this.recomflag = true
			},
			chooseHot() {
				this.recomflag = false
			}
		}
	}
</script>

<style lang="scss">
	.home{
		.drawer{
			
		}
		.banner{
			swiper{
				width: 750rpx;
				height: 400rpx;
				text-align: center;
				image{
					width: 750rpx;
				}
			}
		}
		
		.nav{
			display: flex;
			margin-top: 20px;
			.nav_item{
				width: 75px;
				margin: 5px auto;
				text-align: center;
				background: #fff;
				font-size: 13px;
				border: solid 1px #eaeaea;
				border-radius: 20rpx;
				box-shadow: 5px 5px 10px #eaeaea;
				padding-top: 5px;
			}
		}
		.recom{
			height: 230px;
			margin-top: 30px;
			.u_list{
				display: flex;
				font-size: 20px;
				view{
					margin-left: 10px;
				}
				.line{
					border-left: 1px solid #808080;
				}
			}
			.recom-item{
				margin-top: 10px;
			}
			
			.scroll-list{
				width: 100%;
				margin-top: 20px;
				overflow: hidden;
				white-space: nowrap;
				.scroll-item{
					display: inline-block;
					margin-left: 10px;
					image{
						width: 95px;
						height: 140px;
						border-radius: 10px;
					}
					.grade{
						color: #ff9500;
					}
				}
				// overflow-x: hidden;
			}
		}
		.find{
			margin-top: 10px;
			margin-left: 10px;
			.find-item{
				padding-bottom: 10px;
				border-bottom: 1px solid #eaeaea;
				.f-pics{
					display: flex;
					margin-top: 10px;
					.cover{
						width: 110px;
						height: 160px;
						border-radius: 10px;
					}
					.f-swiper{
						width: 65%;
						height: 160px;
						margin-left: 15px;
						image{
							width: 235px;
							height: 160px;
							border-radius: 10px;
						}
					}
				}
				.text{
					margin-top: 10px;
					.t-tit{
						.like{
							margin-right: 10px;
							float: right;
							text-align: center;
						}
					}
					.t-score{
						display: inline-flex;
						.t-score-n{
							position: absolute;
							left: 75px;
							margin-top: -5px;
							font-size: 15px;
						}
					}
				}
			}
		}
		.bottom{
			height: 50px;
			margin-top: 20px;
			text-align: center;
		}
	}
</style>
